<template>
  <div class="index">
    <v-header></v-header>
    <div class="floor">
      <div class="title_warrper">
        <p class="title">走进世贸</p>
        <span style="color:#6893be">World Trade profile</span>
      </div>
      <Row style="padding:0 10px">
        <Col
          class="zjsm"
          span="24"
        >
        <Card>
          在公司出现以前，个人独资企业是最典型的企业形式；与独资企业并存的是各种，合伙组织当时的合伙组织中最典型的就是家族经营团体，在公司产生以前，合伙组织都没有取得法人的地位……
          <Button
            size="small"
            type="primary"
            ghost
          >了解详情</Button>
        </Card>
        </Col>
      </Row>
    </div>
    <div class="floor">
      <div class="title_warrper">
        <p class="title">世贸动态</p>
        <span style="color:#6893be">World trade trends</span>
      </div>
      <Row style="padding:0 10px">
        <Col
          class="smdt"
          span="24"
        >
        <div
          class="swiper-container"
          id="floor_swiper"
        >
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="floor-anomaly">
                <div class="floor-one">
                  <img
                    src="../../assets/index/newsTitle_07.jpg"
                    width="100%"
                  />
                </div>
                <div>
                  <div class="floor-two">
                    <img
                      src="../../assets/index/newsTitle_07.jpg"
                      width="100%"
                    />
                  </div>
                  <div>
                    <img
                      src="../../assets/index/newsTitle_07.jpg"
                      width="100%"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-button-prev"></div>
          <!--左箭头-->
          <div class="swiper-button-next"></div>
          <!--右箭头-->
        </div>
        </Col>
      </Row>
    </div>
    <div class="floor">
      <div class="title_warrper">
        <p class="title">世贸服务</p>
        <span style="color:#6893be">World trade trends</span>
      </div>
      <Row style="padding:0 10px">
        <Col
          class="smfw"
          span="24"
        >
        <ul>
          <li>
            <div class="m_img">
              <img
                src="../../assets/index/zxlist_03.jpg"
                alt=""
              >
            </div>
            <div class="m_title">文化娱乐</div>
          </li>
          <li>
            <div class="m_img">
              <img
                src="../../assets/index/zxlist_05.jpg"
                alt=""
              >
            </div>
            <div class="m_title">咨询中心</div>
          </li>
          <li>
            <div class="m_img">
              <img
                src="../../assets/index/zxlist_10.jpg"
                alt=""
              >
            </div>
            <div class="m_title">服务中心</div>
          </li>
          <li>
            <div class="m_img">
              <img
                src="../../assets/index/zxlist_12.jpg"
                alt=""
              >
            </div>
            <div class="m_title">会员中心</div>
          </li>
        </ul>
        </Col>
      </Row>
    </div>
    <div class="floor">
      <div class="title_warrper">
        <p class="title">招商引资</p>
        <span style="color:#6893be">World trade trends</span>
      </div>
      <Row style="padding-left:10px">
        <Col
          class="zsyz"
          span="24"
        >
        <div
          class="swiper-container"
          id="floor_zsyz"
        >
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="floor_rule">
                <div>
                  <img
                    src="../../assets/index/newsTitle_05.jpg"
                    alt=""
                  >
                  <p class="floor_title">投资详情</p>
                  <p>投资投资投资</p>
                  <Button
                    size="small"
                    type="primary"
                    ghost
                  >了解详情</Button>
                </div>
                <div>
                  <img
                    src="../../assets/index/newsTitle_05.jpg"
                    alt=""
                  >
                  <p class="floor_title">投资详情</p>
                  <p>投资投资投资</p>
                  <Button
                    size="small"
                    type="primary"
                    ghost
                  >了解详情</Button>
                </div>
                <div>
                  <img
                    src="../../assets/index/newsTitle_05.jpg"
                    alt=""
                  >
                  <p class="floor_title">投资详情</p>
                  <p>投资投资投资</p>
                  <Button
                    size="small"
                    type="primary"
                    ghost
                  >了解详情</Button>
                </div>
              </div>
            </div>
          </div>
        </div>
        </Col>
      </Row>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vHeader from '../../components/mobile/main_header.vue'
import vFooter from '../../components/mobile/main_footer.vue'
export default {
  components: {
    vHeader,
    vFooter
  },
  data() {
    return {
    }
  },
  mounted() {
   
    new Swiper('#floor_swiper', {
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
    new Swiper('#floor_zsyz', {
      loop: true,
    })
  },
}
</script>

<style lang="less">
.index {
  .floor {
    padding: 10px 0;
    .zjsm {
      background-color: #dedede;
      background-image: url("../../assets/index/jjBg.jpg");
      background-repeat: no-repeat;
      background-size: 45% 100%;
      padding: 10px 0;
      display: flex;
      justify-content: flex-end;
      .ivu-card {
        width: 70%;
      }
      .ivu-card-body {
        padding: 0;
        font-size: 0.5rem;
      }
    }
    .smdt {
      .floor-anomaly {
        display: flex;
        flex-direction: row;
        background-color: #fff;
        border-bottom: 1px solid #ddd;
        height: 140px;
        div {
          width: 10rem;
          box-sizing: border-box;
          -webkit-box-sizing: border-box;
          img {
            height: 140px;
          }
        }
        .floor-one {
          height: 100%;
          margin-right: 5px;
          img {
            height: 100%;
          }
        }
        div div {
          height: 50%;
          margin-bottom: 5px;
          img {
            height: 100%;
          }
        }
      }
    }
    .smfw {
      ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li {
          width: 48%;
          margin-bottom: 10px;
          position: relative;
          img {
            width: 100%;
          }
          .m_title {
            position: absolute;
            left: 0;
            top: 50%;
            text-align: center;
            width: 100%;
            height: 23px;
            color: #ffffff;
            font-size: 1.5em;
            background-image: linear-gradient(
              to left,
              rgba(0, 0, 0, 0.3) 15%,
              rgba(0, 0, 0, 0.9) 70%,
              rgba(0, 0, 0, 0.3) 100%
            );
            line-height: 23px;
            margin-top: -11px;
          }
        }
      }
    }
    .zsyz {
      #floor_zsyz {
        padding: 10px 0;
        .swiper-slide {
          height: 120px;
          .floor_rule {
            display: flex;
            justify-content: space-around;
            flex-flow: nowrap;
            div {
              width: 31%;
              img {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>